<template>
  <div class="song-list" @click="closeAllClassifyPopupFn" >
    <div v-if="!pcLoading">
      <page-list-layout>
        <template v-slot:one>
          <div class="header flex items-center justify-between border-b-2 pb-2">
            <div class="flex items-center ">
              <h2 class="mt-0 mb-0 mr-2">{{ catelistParams.cat }}</h2>
              <div class="relative">
                <YuButton @click.stop="openAllClassifyPopup">
                <span class="flex items-center">
                  <span>选择分类</span>
                  <span class="inline-block i-mdi-cannabis"/>
                </span>
                </YuButton>
                <transition
                    enter-active-class="animate__animated animate__zoomIn"
                    leave-active-class="animate__animated animate__zoomOut"
                >
                  <AllClassifyPopup
                      v-if="closeAllClassifyPopup"
                      :catlist="SongClassifyTitleData"
                      @noAllClassifyPopupFn="noAllClassifyPopupFn"
                      @getClassifyData="getClassifyData"
                  />
                </transition>
              </div>
            </div>
          </div>
        </template>
        <template v-slot:two>
          <song-list-layout
              :playlists="playlistsData.playlists"
              @jumpPlayListDetails="jumpPlayListDetails"
          />
        </template>
        <template v-slot:three>
          <van-pagination
              class="van-pagination"
              v-model="currentPage"
              :total-items="playlistsData.total"
              :items-per-page="50"
              :show-page-size="6"
              force-ellipses
              @change="pageChange"
          >
            <template #prev-text>
              <van-icon name="arrow-left" />
            </template>
            <template #next-text>
              <van-icon name="arrow" />
            </template>
            <template #page="{ text }">{{ text }}</template>
          </van-pagination>
        </template>
      </page-list-layout>
    </div>
    <loading v-else/>
  </div>
</template>

<script setup>
import PageListLayout from '@/components/PageListLayout/index.vue'
import YuButton from '@/components/YuButton/index.vue'
import AllClassifyPopup from './components/AllClassifyPopup/index.vue'
import SongListLayout from '@/components/SongListLayout/index.vue'


import {reactive, toRefs} from "vue"
import {useStore} from "@/store/index"
import {useRouter} from "vue-router";

const store = useStore()
const router = useRouter()
const data = reactive({
  closeAllClassifyPopup: false, // 关闭选择分类的弹窗
  SongClassifyTitleData: {}, // 歌单分类数据标题
  pcLoading: false, // loading
  catelistParams: { cat: '全部', order: 'hot' }, // 获取歌单数据的参数
  currentPage: 0, // 分页页码
  num: 0, // 数据偏移量
  playlistsData: { // 歌单数据
    total: 0,
    playlists: [],
    cat: ''
  }
})
const {
  closeAllClassifyPopup,
  SongClassifyTitleData,
  catelistParams,
  playlistsData,
  currentPage,
  pcLoading
} = toRefs(data)

// 关闭选择分类弹窗
const closeAllClassifyPopupFn = () => {
  data.closeAllClassifyPopup = false
}
// 打开选择分类弹窗或者关闭
const openAllClassifyPopup = () => {
  data.closeAllClassifyPopup = !data.closeAllClassifyPopup
}
// 不关闭选择分类弹窗
const noAllClassifyPopupFn = (flag) => {
  data.closeAllClassifyPopup = flag
}

// 获取歌单数据
const getClassifyData = (info) => {
  // 开启loading
  data.pcLoading = true
  data.catelistParams.cat = info.name
  getTopPlaylist()
  // console.log(info)
}

// 获取歌单分类的数据 第一个值{ cat: '全部', order: 'new' },第二个值是偏移量也就是分页
const getTopPlaylist = () => {
  store.getTopPlaylist(data.catelistParams,  data.num).then(res => {
    // 关闭loading
    data.pcLoading = false
    data.playlistsData = res
    // console.log(res)
  })
}
// 开启loading
data.pcLoading = true

// 获取歌单数据
getTopPlaylist()


// 弹窗分类数据
store.getPlaylistCatlist().then(res => {
  console.log(res)
  data.SongClassifyTitleData = {
    all: res.catlist,
    categories: res.categories
  }
  console.log(data.SongClassifyTitleData)
})

// 分页改变触发
const pageChange = (value) => {
  // 开启loading
  data.pcLoading = true
  data.num = value - 1
  getTopPlaylist()
}
// 点击卡片跳转到详情页
const jumpPlayListDetails = (id) => {
  router.push({
    path: '/play-list-detail',
    query: {
      id
    }
  })
}
</script>

<style scoped lang="scss">
:deep(.van-pagination) {

  .van-pagination__item--prev,.van-pagination__item--next  {

  }
  .van-pagination__item--active {
    color: v-bind('store.theme.hoverTextColor')!important;
  }
  .van-pagination__item--page, .van-pagination__item--next, .van-pagination__item--prev {
    color: v-bind('store.theme.textColor');
    button {
      background-color: v-bind('store.theme.HoverBgColor');
    }
  }
}
</style>
